@keyframes y-animaton{
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
        transform: rotate(180deg);
    }
}

div {
    width: 200px;
    height: 200px;
    text-align: center;
    align-content: center;
    /*animation-name: y-animaton;*/
    /*animation-duration: 3s;*/
    /*animation-fill-mode: none;*/
    /*animation-iteration-count: 1;*/
    /*animation-timing-function: steps(90, end);*/
    border-top: 5px solid red;
    border-bottom: 5px solid orange;
    border-left: 50px solid blue;
    background-color: aqua;
    margin: 20px;
    padding: 20px;
    border-radius: 50%;
}

div:hover {
    background-color: aquamarine;
    animation-name: y-animaton;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    animation-fill-mode: forwards;
}
